<template>
  <el-dialog draggable v-model="dialogVisible" width="50%" :modal="false" :z-index="2001" center>
    <!-- <div class="baogao" v-if="visible"> -->
    <el-table :data="paginatedTableData" style="width: 100%" max-height="600">
      <el-table-column prop="bmmc" label="部门" />
      <el-table-column prop="jyaq" label="简要案情" />
      <el-table-column prop="sfdxsg" label="直接财产损失" />
      <!-- <el-table-column prop="sfgz" label="路号" /> -->
      <el-table-column prop="sgbm" label="事故编号" width="200" />
      <el-table-column prop="sgdd" label="事故地点" />
      <el-table-column prop="sgfssj" label="事故发生时间" width="200" />
      <el-table-column prop="sglx" label="事故类型" />
      <el-table-column prop="sgrdyy" label="事故认定原因" />
      <!-- <el-table-column prop="lm" label="路名" width="120" /> -->
      <!-- <el-table-column prop="gls" label="公里数" /> -->
      <!-- <el-table-column prop="ms" label="米数" /> -->
      <!-- <el-table-column prop="sglx" label="事故类型" /> -->
    </el-table>
    <div class="flex items-center gap-20px text-#fff">
      <el-pagination :page-size="pageSize" :current-page="currentPage" layout="prev, pager, next" :total="totalItems"
        @current-change="handlePageChange" />
      <span>总页数：{{ totalPages }}</span>

      <span style="">总条数：{{ totalItems }}</span>
    </div>
    <!-- <el-button class="mt-10px w-80px" type="primary" @click="emit('close')"> 返回 </el-button> -->
    <!-- </div> -->
  </el-dialog>
</template>

<script lang="ts" setup>
interface MonthCountList {
  sgrdyy: String;
  sglx: String;
  sgfssj: any;
  sgdd: any;
  sgbm: String;
  sfgz: any;
  sfdxsg: any;
  jyaq: any;
  bmmc: string;
}

interface Props {
  visible: boolean;
  listData: MonthCountList[];
}

const props = defineProps<Props>();
const emit = defineEmits(['update:visible']);

const dialogVisible = computed({
  get() {
    return props.visible;
  },
  set(newValue) {
    emit('update:visible', newValue);
  },
});

const totalItems = computed(() => props.listData.length);
const totalPages = computed(() => Math.ceil(totalItems.value / pageSize.value));
const pageSize = ref(10);
const currentPage = ref(1);

const paginatedTableData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return props.listData.slice(start, end);
});

const handlePageChange = (newPage: number) => {
  currentPage.value = newPage;
};
</script>

<style lang="less" scoped>
// .baogao {
//   position: absolute;
//   top: 0;
//   left: 0;
//   width: 100vw;
//   height: 100vh;
//   display: flex;
//   justify-content: center;
//   color: white;
//   flex-direction: column;
//   background-color: #003137e7;
//   z-index: 9999;

//   .cell {
//     text-align: center;
//   }

  // :deep(.el-dialog) {
  //   background-color: #00313799 !important;
  // }

  :deep(.el-pagination) {
    button {
      color: #fff;
    }
  }
// }
</style>
